<template>
	<view class="qiun-columns">
		<view class="qiun-bg-white qiun-title-bar qiun-common-mt"><view class="qiun-title-dot-light">雷达图</view></view>
		<view class="qiun-charts"><canvas canvas-id="canvasRadar" id="canvasRadar" class="charts"></canvas></view>
	</view>
</template>

<script>
import uCharts from '@/components/u-charts/js/u-charts.js';
var _self;
var canvaRadar = null;
export default {
	data() {
		return {
			cWidth: '',
			cHeight: '',
			pixelRatio: 1
		};
	},
	onLoad() {
		_self = this;
		this.cWidth = uni.upx2px(750);
		this.cHeight = uni.upx2px(500);
		this.getServerData();
	},
	methods: {
		getServerData() {
			var chartData = {
				categories: ['融资能力', '管理能力', '财务能力', '企业资质', '研发能力', '团队架构'],
				series: [
					{
						name: '融资能力',
						data: [0, 11, 1.2, 2.2, 3.3, 10.4]
					},
					{
						name: '管理能力',
						data: [0, 21, 2.2, 2.2, 3.3, 4.4]
					},
					{
						name: '财务能力',
						data: [0, 31, 3.2, 2.2, 33, 64]
					},
					{
						name: '企业资质',
						data: [0, 41, 4.2, 2.2, 3, 54]
					},
					{
						name: '研发能力',
						data: [1, 5.1, 5.2, 2.2, 33, 4.4]
					},
					{
						name: '团队架构',
						data: [0, 6.1, 6.2, 2.2, 33, 44]
					}
				]
			};
			_self.showRadar('canvasRadar', chartData);
			// uni.request({
			// 	url: 'https://www.ucharts.cn/data.json',
			// 	data:{
			// 	},
			// 	success: function(res) {
			// 		console.log(res.data.data)
			// 		let Radar={categories:[],series:[]};
			// 		Radar.categories=res.data.data.Radar.categories;
			// 		Radar.series=res.data.data.Radar.series;
			// 		_self.showRadar("canvasRadar",Radar);
			// 	},
			// 	fail: () => {
			// 		_self.tips="网络错误，小程序端请检查合法域名";
			// 	},
			// });
		},
		showRadar(canvasId, chartData) {
			canvaRadar = new uCharts({
				$this: _self,
				canvasId: canvasId,
				type: 'radar',
				fontSize: 12,
				legend: { show: true },
				background: '#FFFFFF',
				gridColor: '#f00',
				pixelRatio: _self.pixelRatio,
				animation: true,
				dataLabel: true,
				categories: chartData.categories,
				series: chartData.series,
				width: _self.cWidth * _self.pixelRatio,
				height: _self.cHeight * _self.pixelRatio,
				extra: {
					radar: {
						max: 200, //雷达数值的最大值
						labelColor: '#409EFF'
					}
				}
			});
		}
	}
};
</script>

<style>
/*样式的width和height一定要与定义的cWidth和cHeight相对应*/
.qiun-charts {
	width: 750upx;
	height: 500upx;
	background-color: #ffffff;
}

.charts {
	width: 750upx;
	height: 500upx;
	background-color: #ffffff;
}
</style>
